<script setup lang='ts'>
import { ref, computed, onMounted, onBeforeUnmount, reactive, provide } from 'vue'
import { useTodoStore } from '@/stores/todoStore'
import TodoInput from '@/components/TodoInput.vue'
import TodoItem from '@/components/TodoItem.vue';
import type { iItem } from '@/interfaces/interfaceTodo'

const todoStore = useTodoStore()
const dialogEditVisible = ref<boolean>(false)
const editItem = reactive<iItem>({id:'', value: '', checked: false})

// 待办事项列表数据
const list = computed(() => {
  return todoStore.list
})
function toggleDialog() {
  dialogEditVisible.value = !dialogEditVisible.value
}

// 更改待办事项
function updateItem(id: string) {
  const findItem = list.value.find(item => id === item.id)
  if(findItem){
    editItem.id = findItem.id
    editItem.value = findItem.value
    dialogEditVisible.value  = true
  }
}

// 提交更改
function dialogConfirm() {
  if(editItem.value.trim()) {
    todoStore.updateItem(editItem.id, editItem)
    dialogEditVisible.value = false
    editItem.id = ""
    editItem.value = ""
    ElMessage.success('修改成功！')
  } else {
    ElMessage.warning('请输入内容')
  }
}

// 监听键盘回车事件
function keyboardListener(ev: KeyboardEvent):void {
  ev.key === 'Enter' && todoStore.addTodoItem()
}

// 组件加载完后触发 mounted生命周期
onMounted(() => {
  // 添加键盘事件监听
  window.addEventListener('keydown', keyboardListener)
})

// 离开之前触发 beforeUnmount生命周期
onBeforeUnmount(() => {
  // 移除键盘事件监听
  window.removeEventListener('keydown', keyboardListener)
})

// 提供
provide('updateItem', updateItem)

</script>

<template>
  <div class='todoWrapper'>
    <header>
      <!-- 标题 -->
      <h2 class='todoTitle'>
        Vue <span class='todoTitleBlock'>To</span>do
      </h2>
      <!-- 待办事项输入 -->
      <div class='todoWrapper'>
        <TodoInput />
      </div>
    </header>
    <!-- 待办事项列表 -->
    <ul class='todoList' v-if='list.length'>
      <li class='todoItem' v-for='item in list' :key='item.id'>
        <TodoItem :data='item' />
      </li>
    </ul>
    <!-- 修改弹框 -->
    <Teleport to='body'>
      <el-dialog v-model="dialogEditVisible" title="修改待办事项">
        <el-input v-model="editItem.value"  autocomplete="off" />
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="toggleDialog">取消</el-button>
            <el-button type="primary" @click="dialogConfirm">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </Teleport>
  </div>
</template>

<style lang='scss' scoped>
:root {
  --color-blue: #1171cb;
}
.todoTitle {
  text-align: center;
  font-size: 55px;
  margin-top: 75px;
}
.todoTitleBlock {
  color: #fff;
  padding: 0 10px;
  background-color: #1171cb;
  border-radius: 3px;
}

.todoWrapper {
  width: 600px;
  margin: auto;
  text-align: center;
  margin-top: 50px;
}
.todoList {
  max-height: 400px;
  overflow: auto;
  padding-left: 0;
  list-style: none;
  text-align: left;
  border: 1px solid #409EFF;
  border-radius: 3px;
  margin-top: 40px;
}
/* 隐藏滚动条 */
.todoList::-webkit-scrollbar{
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
.todoItem {
  background: #ecf5ff;
}
/* 偶数行 */
.todoItem:nth-of-type(even) {
  background: #c6e2ff;
  color: #333
}
</style>